renderUsername()

checkLogin()

registerLoginOut()

async function getData() {
    const res = await axios.get("/students")

    const html = res.data.data.map(v => {

        const{name, age, gender, group, hope_salary, salary, province, city, area, id}= v
    return `
        <tr>
            <td>${name}</td>
            <td>${age}</td>
            <td>${gender === 1 ? '男' : '女'}</td>
            <td>第${group}组</td>
            <td>${hope_salary}</td>
            <td>${salary}</td>
            <td>${province + city + area}</td>
            <td data-id="${id}">
                <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
            </td>
        </tr>
        `
}).join('')
document.querySelector(".list").innerHTML = html
document.querySelector(".total").innerHTML = res.data.data.length
}

getData()
const modalDom=document.querySelector("#modal")
const modal=new bootstrap.Modal(modalDom)

document.querySelector("#openModal").addEventListener("click",()=>{
    modal.show()
})
const proSelect=document.querySelector('[name=province]')
const citySelect=document.querySelector('[name=city]')
const areaSelect=document.querySelector('[name=area]')

async function initSelect(){
    const proRes=await axios.get("/api/province")
    const proHtml=proRes.data.list.map(v=>{
        return `<option value="${v}">${v}</option>`
    }).join("")

    proSelect.innerHTML=`<option value="">---请选择---</option>${proHtml}`

    proSelect.addEventListener("change",async()=>{
        const cityRes=await axios.get("/api/city")
        const cityHtml=cityRes.data.list.map(v=>{
            return `<option value="${v}">${v}</option>`
    }).join("")
    citySelect.innerHTML=`<option value="">---请选择---</option>${cityHtml}`
    areaSelect.innerHTML=`<option value="">---请选择---</option>`
    })

    citySelect.addEventListener("change",async()=>{
        const areaRes=await axios.get("/api/area")
        const areaHtml=areaRes.data.list.map(v=>{
            return `<option value="${v}">${v}</option>`
    }).join("")
    areaSelect.innerHTML=`<option value="">---请选择---</option>${areaHtml}`
    })
}
initSelect()

document.querySelector("#submit").addEventListener("click",()=>{
    if(modalDom.dataset.id){
        editStudent()
    }else{
        addStudent()
    }
})

document.querySelector(".list").addEventListener("click",(e)=>{

    if(e.target.classList.contains("bi-trash")){
        const id=e.target.parentNode.parentNode.dataset.id

        delStudent(id)
    }

    if(e.target.classList.contains("bi-pen")){
        const id =e.target.parentNode.parentNode.dataset.id
        editStudent(id)
    }
})
document.querySelector("#openModal").addEventListener("click",()=>{
    console.log(2345678);
    document.querySelector(".modal-title").innerHTML="添加学生"

    document.querySelector("#form").reset()
    citySelect.innerHTML=`<option value="">---城市---</option>`
    areaSelect.innerHTML=`<option value="">---地区---</option>`

    modalDom.dataset.id=''
    modal.show()
})


async function editStudent(id){
    const res=await axios.get(`/students/{id}`)
    console.log(res,'-------');

    document.querySelector(".modal-title").innerHTML="编辑学生"

    const keyArr=["name","age","group","hope_salary","salary"]

    keyArr.forEach(key=>{
        document.querySelector(`[name=${key}]`).value=res.data.data[key]
    })
    const {gender}=res.data.data

    const chks=document.querySelectorAll("[name=gender]")
    chks[gender].checked=true

    const{province,city,area}=res.data.data;
    proSelect.value=province


    const cityRes=await axios.get("/api/city",{
        params:{
            pname:province
        }
    })

    console.log(cityRes,'===');
    const cityHtml=cityRes.data.list.map(v=>{
        return `<option value="${v}">${v}</option>`
    }).join("")

    citySelect.innerHTML=`<option value="">---请选择---</option><option value="${city}">${city}</option>${cityHtml}>`
    citySelect.value=city

    const areaRes=await axios.get("/api/area",{
        params:{
            pname:province,
            cname:city
        }
    })
    const areaHtml=areaRes.data.list.map(v=>{
        return `<option value="${v}">${v}</option>`
    }).join("")

    areaSelect.innerHTML=`<option value="">---请选择---</option><option value="${area}">${area}</option>${areaHtml}>`
    areaSelect.value=area
    modal.show()
}

async function delStudent(id){
    const res=await axios.delete(`/students/${id}`)

    showToast(res.data.message)
    getData()
}
async function addStudent(){
    const form=document.querySelector("#form")
    const data=serialize(form,{emty:true,hash:true})
    data.age=+data.age
    data.gender=+data.gender
    data.hope_salary=+data.hope_salary
    data.salary=+data.salary
    data.group_id=+data.group_id

    try{
        const res=await axios.post("/students",data)
        showToast(res.data.message)
        getData()
    }catch(error){
        showToast(error.response.data.message)
    }
    modal.hide()
}
async function saveEdit(){
    const form=document.querySelector("#form")
    const data=serialize(form,{emty:true,hash:true})
    data.age=+data.age
    data.gender=+data.gender
    data.hope_salary=+data.hope_salary
    data.salary=+data.salary
    data.group_id=+data.group_id

    try{
        const res=await axios.post(`/students/${modalDom.dataset.id}`,data)
        showToast(res.data.message)
        getData()
    }catch(error){
        showToast(error.response.data.message)
    }
    modal.hide()
}